<template>
  <main-content title="配置商品" back :back-func="true" @back="leaveConfirm">
    <el-form ref="formRef" :model="form" :label-width="110">
      <goods-name v-model:model-value="form.name" />
      <goods-img v-model:model-value="form.thumbnailUrl" />
      <GoodsAudit v-model:model-value="form.verifyFlag"></GoodsAudit>
      <RechargeName v-if="form.type == 'recharge'" v-model:model-value="form.rechargeAccountRegexId"
        v-model:model-regx="form.rechargeAccountRegex" v-model:model-place-holder="form.rechargePlaceHolder">
      </RechargeName>
      <product-add-table v-model:model-value="form.products" :product-options="productOptions"
        :column-props="['name', 'thumbnailUrl', 'originalPrice', 'salePrice', 'payOfCurrencyId', 'stock', 'addOrDeductionStockCount']">
        <template #product-column>
          <product-name />
          <product-thumbnail-url />
          <product-cost-price />
          <product-original-price />
          <product-sale-price />
          <product-pay-of-currency :options="currencyTypes" />
          <product-before-stock />
          <product-add-or-deduction-stock-count />
        </template>
      </product-add-table>

      <goods-description v-model:model-value="form.description" />

      <goods-detail-text v-model:model-value="form.detailText" :initial-value="initialDetailText" />

      <el-form-item>
        <el-button type="primary" @click="add">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </main-content>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus";
import { addMemberGoods } from "@/api/vipCenter";
import GoodsName from "@/components/goodsCenter/addGoodsFormItem/GoodsName.vue";
import GoodsImg from "@/components/goodsCenter/addGoodsFormItem/GoodsImg.vue";
import ProductAddTable from "@/components/goodsCenter/addGoodsFormItem/ProductAddTable.vue";
import GoodsDescription from "@/components/goodsCenter/addGoodsFormItem/GoodsDescription.vue";
import GoodsDetailText from "@/components/goodsCenter/addGoodsFormItem/GoodsDetailText.vue";
import GoodsAudit from "@/components/goodsCenter/addGoodsFormItem/GoodsAudit.vue";

import ProductName from "@/components/goodsCenter/addGoodsProductColumn/ProductName.vue";
import ProductThumbnailUrl from "@/components/goodsCenter/addGoodsProductColumn/ProductThumbnailUrl.vue";
import ProductOriginalPrice from "@/components/goodsCenter/addGoodsProductColumn/ProductOriginalPrice.vue";
import ProductSalePrice from "@/components/goodsCenter/addGoodsProductColumn/ProductSalePrice.vue";
import ProductBeforeStock from "@/components/goodsCenter/addGoodsProductColumn/ProductBeforeStock.vue";
import ProductAddOrDeductionStockCount from "@/components/goodsCenter/addGoodsProductColumn/ProductAddOrDeductionStockCount.vue";
import ProductCostPrice from "@/components/goodsCenter/addGoodsProductColumn/ProductCostPrice.vue";
import { useLeaveConfirm } from "@/components/goodsCenter/compositions/useLeaveConfirm";
import { useGetCurrencyType } from "@/views/pointsMall/compositions/useGetCurrencyType";
import { useGetSubmitStoreDetail } from "@/components/goodsCenter/compositions/useGetSubmitStoreDetail";
import { useCrossPage } from "@/compositions/crossPage/useCrossPage";

const route = useRoute()
const router = useRouter()
const { id } = route.query

const formRef = ref<FormInstance>()
const { form, initialDetailText, productOptions, getDetail, formatData } = useGetSubmitStoreDetail()

const add = () => {
  console.log(form)

  formRef.value?.validate(async (valid, fields) => {
    // console.log('valid-result', valid)
    // console.log('valid-result field', fields)
    if (valid) {
      const _form = formatData()

      const rs = await addMemberGoods(_form)
      if (rs.code === 200) {
        ElMessage.success('添加成功')
        storeEvent("refreshList")
        router.back()
      }
    }
  })

}
// 离开确认
const { leaveConfirm } = useLeaveConfirm()

// 积分类型
const { currencyTypes, getCurrencyTypes } = useGetCurrencyType();

// keepAlive 导致的刷新问题
const { storeEvent } = useCrossPage("vipCenter", {})

onMounted(() => {
  getDetail();
  getCurrencyTypes();
})
</script>

<style scoped lang="scss"></style>
